<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 类选择器，也叫class选择器 */
        /* 使用元素选择器，是选中页面中所有的同类元素 */
        /* 想选中同类中某一个元素，可以给这个元素起一个名字 */
        /* 起名字有两种方式：1）通过class起名字  2）通过id起名字 */
        /* 通过  .class名字 就可以选中某个元素 */
        /* 可以给不同的标签，起相同的名字，从而可以选中多个不同的标签 */
        .box{
            color: skyblue;
            background-color: yellow;
        }
        .haha{
            font-size: 40px;
        }
        /* .123{
            width:500px;
        } */
        .abc_123{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <h1>我是一个h1标签</h1>
    <ul>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
    </ul>
    <p class="box">我是一个p标签</p>
    <!-- 可以给一个标签起多个名字，名字与名字之间使用空格隔开 -->
    <!-- class名字，不是说你想写啥就写啥，由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头 -->
    <div class="box haha abc_123 def-ok">我是一个div</div>
    <ul>
        <li>
            <div>我是li中的一个DIV</div>
        </li>
    </ul>
</body>
</html>